<template>
  <div>
    <el-dialog
      title="添加"
      v-model="addDialogVisible"
      width="400px"
      :before-close="handleClose"
    >
      <div>
        <el-form label-position="right" label-width="60px" :model="tagForm">
          <el-form-item label="id">
            <el-input v-model="tagForm.id"></el-input>
          </el-form-item>
          <el-form-item label="name">
            <el-input v-model="tagForm.name"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="$emit('handleClose:show')">取 消</el-button>
          <el-button type="primary" @click="addTag">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { computed, reactive } from "vue";
import { tagsCreate } from "../../../network/api/tags";
import { ElMessage } from "element-plus";
export default {
  props: {
    dialogVisible: Boolean,
  },
  setup(props, { emit }) {
    const tagForm = reactive({
      id: "",
      name: "",
    });
    const handleClose = () => {
      emit("handleClose:show");
    };
    const addDialogVisible = computed({
      get: () => props.dialogVisible,
      set: () => emit("handleClose:show"),
    });
    const addTag = () => {
      tagsCreate(tagForm).then((res) => {
        if (res.status === 200) {
          emit("handleClose:show", "success");
          ElMessage.success("创建tag成功");
          tagForm.id = "";
          tagForm.name = "";
        }
      });
    };
    return {
      handleClose,
      addDialogVisible,
      addTag,
      tagForm,
    };
  },
};
</script>